<template>
  <footer v-show='isNavShow'>
    <ul>
      <router-link to="/films" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'list' : ''">
          <i class="iconfont icon-dianyingbofang"></i>
          <span>电影</span>
        </li>
      </router-link>
      <router-link to="/cinemas" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'list' : ''">
          <i class="iconfont icon-yingyuan"></i>
          <span>影院</span>
        </li>
      </router-link>
      <router-link to="/center" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'list' : ''">
            <i class="iconfont icon-shouye"></i>
            <span>我的</span>
        </li>
      </router-link>
    </ul>
  </footer>
</template>
<script>
import '@/assets/iconfont/iconfont.css'
import { mapState } from 'vuex'
export default {
  computed: mapState(['isNavShow'])
}
</script>
<style lang="scss" scoped>
.list {
  color: red;
}
footer {
  width: 100%;
  height:44px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  background: rgb(255, 255, 255);
  padding-top:5px;
  ul {
    display: flex;
    li {
      flex: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      i{
          font-size: 25px;
      }
      span{
          font-size:10px;
      }
    }
  }
}
</style>
